<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
                                                    <!-- 就是从下标0开始 删除所有 -->
        <span class="span" @click="$emit('clearArr')">全部删除</span>
        &nbsp;&nbsp;
        <span class="span" @click="isDeleteShow=false">完成</span>
      </div>
      <van-icon name="delete" v-else @click="isDeleteShow=true"></van-icon>
    </van-cell>

    <van-cell
      :title="item"
      v-for="(item, index) in searchHistories"
      :key="index"
      @click="onSearchItemClick(item,index)"
    >
      <van-icon name="clear" v-show="isDeleteShow"></van-icon>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "SearchHistory",
  data() {
    return {
      isDeleteShow: false, //控制删除显示状态
    };
  },
  props: {
    searchHistories: {
      type: Array,
      required: true,
    },
  },
  methods: {
    onSearchItemClick(item,index){
      if(this.isDeleteShow){
          // 直接删除 因为是引用类型 所以可以直接修改!
        this.searchHistories.splice(index,1);
      }else{
        this.$emit("search",item)
      }
    }
  },
};
</script>

<style scoped lang="less">
.search-history {
  .span{
    padding: 5px 10px ;
    background-color: #eee;
    color: #999;
    border-radius: 5px;
  }
  /deep/ .van-icon-delete {
    color: #666;
    font-size: 30px;
  }
  /deep/.van-icon {
    color: #999 !important;
  }
}
</style>
